[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import TaskDashboard from "@/components/task-dashboard" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/task-manager.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { PlusCircle, CheckCircle2, Circle, Trash2, Tag } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { cn } from "@/lib/utils" type Task = { id: string title: string completed: boolean category: string createdAt: Date } const categories = ["Work", "Personal", "Shopping", "Health", "Other"] export default function TaskManager() { const [tasks, setTasks] = useState(() => { if (typeof window !== "undefined") { const savedTasks = localStorage.getItem("tasks") return savedTasks ? JSON.parse(savedTasks) : [] } return [] }) const [newTask, setNewTask] = useState("") const [selectedCategory, setSelectedCategory] = useState("Other") const [filter, setFilter] = useState("all") useEffect(() => { localStorage.setItem("tasks", JSON.stringify(tasks)) }, [tasks]) const addTask = () => { if (newTask.trim() === "") return const task: Task = { id: Date.now().toString(), title: newTask, completed: false, category: selectedCategory, createdAt: new Date(), } setTasks([task, ...tasks]) setNewTask("") } const toggleTaskCompletion = (id: string) => { setTasks(tasks.map((task) => (task.id === id ? { ...task, completed: !task.completed } : task))) } const deleteTask = (id: string) => { setTasks(tasks.filter((task) => task.id !== id)) } const filteredTasks = tasks.filter((task) => { if (filter === "all") return true if (filter === "completed") return task.completed if (filter === "active") return !task.completed return true }) return (

Tasks

Manage your tasks efficiently

setNewTask(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") addTask() }} className="rounded-xl border-gray-200 focus-visible:ring-blue-500" />

{categories.map((category) => ( setSelectedCategory(category)} > {category} ))}

All Active Completed

) } function TaskList({ tasks, onToggle, onDelete, }: { tasks: Task[] onToggle: (id: string) => void onDelete: (id: string) => void }) { if (tasks.length === 0) { return

No tasks found

} return (

{task.title}

{task.category}

) } [V0_FILE]typescriptreact:file="tailwind.config.js" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="package.json" isFixed="true" isQuickEdit="true" isMerged="true" { "name": "task-management", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "framer-motion": "^10.16.4", "lucide-react": "^0.292.0", "next": "14.0.3", "react": "^18", "react-dom": "^18" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10.0.1", "eslint": "^8", "eslint-config-next": "14.0.3", "postcss": "^8", "tailwindcss": "^3.3.0", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/task-list.tsx" isEdit="true" isMerged="true" "use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Calendar, Clock, Tag, MoreHorizontal, Edit, Trash2, CheckCircle, Circle, AlertCircle, Eye, Paperclip, Copy, } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Button } from "@/components/ui/button" import { Checkbox as UICheckbox } from "@/components/ui/checkbox" import { useTaskContext } from "@/context/task-context" import { formatDate, formatRelativeTime, getRecurrenceText } from "@/lib/utils" interface TaskListProps { tasks: Array<{ id: string title: string description: string categoryId: string priority: string status: string dueDate: string createdAt: string recurrence?: any dependsOn?: string[] tags?: string[] estimatedTime?: number attachments?: any[] completedAt?: string | null }> selectedTasks: string[] onToggleSelection: (id: string) => void onToggleStatus: (id: string) => void onEdit: (id: string) => void onDelete: (id: string) => void onView: (id: string) => void onDuplicate: (id: string) => void } export default function TaskList({ tasks, selectedTasks, onToggleSelection, onToggleStatus, onEdit, onDelete, onView, onDuplicate, }: TaskListProps) { const [hoveredTaskId, setHoveredTaskId] = useState(null) const { categories, tags } = useTaskContext() const getCategoryById = (id: string) => { return categories.find((category) => category.id === id) } const getTagById = (id: string) => { return tags.find((tag) => tag.id === id) } const getStatusIcon = (status: string) => { switch (status) { case "completed": return case "inprogress": return default: return } } const isPastDue = (dueDate: string) => { const now = new Date() const due = new Date(dueDate) return due < now && due.toDateString() !== now.toDateString() } // Animation variants const taskVariants = { hidden: { opacity: 0, y: 20 }, visible: (i: number) => ({ opacity: 1, y: 0, transition: { delay: i * 0.05, duration: 0.3, ease: "easeOut", }, }), exit: { opacity: 0, y: -20, transition: { duration: 0.2, ease: "easeIn", }, }, } if (tasks.length === 0) { return (

No tasks found

Create a new task to get started

) } return (

{tasks.map((task, index) => { const category = getCategoryById(task.categoryId) const isHovered = hoveredTaskId === task.id const pastDue = isPastDue(task.dueDate) const isSelected = selectedTasks.includes(task.id) return ( setHoveredTaskId(task.id)} onMouseLeave={() => setHoveredTaskId(null)} >

onToggleSelection(task.id)} className="mt-1" />

onView(task.id)} > {task.title}

onView(task.id)}> View Details onEdit(task.id)}> Edit onDuplicate(task.id)}> Duplicate onDelete(task.id)}> Delete

{task.description &&

{task.description}

}

{category && (

{category.name}

)} {task.dueDate && (

{formatDate(task.dueDate)}

)}

{formatRelativeTime(task.dueDate)}

{task.priority && (

{task.priority.charAt(0).toUpperCase() + task.priority.slice(1)}

)} {task.recurrence && (

{getRecurrenceText(task.recurrence)}

)} {task.attachments && task.attachments.length > 0 && (

{task.attachments.length}

)}

{task.tags && task.tags.length > 0 && (

{task.tags.map((tagId) => { const tag = getTagById(tagId) if (!tag) return null return (

{tag.name}

) })}

)}

) })}

) } [V0_FILE]typescriptreact:file="components/task-form.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { motion } from "framer-motion" import { X, Trash2, Calendar, Paperclip } from "lucide-react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Calendar as CalendarComponent } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Checkbox } from "@/components/ui/checkbox" import { format } from "date-fns" import { useTaskContext } from "@/context/task-context" import { cn, formatFileSize, generateId } from "@/lib/utils" import type { Attachment } from "@/lib/types" interface TaskFormProps { taskId: string | null onClose: () => void } export default function TaskForm({ taskId, onClose }: TaskFormProps) { const { tasks, categories, tags, addTask, updateTask } = useTaskContext() const task = taskId ? tasks.find((t) => t.id === taskId) : null const [title, setTitle] = useState(task?.title || "") const [description, setDescription] = useState(task?.description || "") const [categoryId, setCategoryId] = useState(task?.categoryId || categories[0]?.id || "") const [priority, setPriority] = useState(task?.priority || "medium") const [status, setStatus] = useState(task?.status || "todo") const [dueDate, setDueDate] = useState(task?.dueDate ? new Date(task.dueDate) : undefined) const [date, setDate] = useState(dueDate) const [isOpen, setIsOpen] = useState(false) const [selectedTags, setSelectedTags] = useState(task?.tags || []) const [estimatedTime, setEstimatedTime] = useState(task?.estimatedTime || 0) const [dependsOn, setDependsOn] = useState(task?.dependsOn || []) const [attachments, setAttachments] = useState(task?.attachments || []) // Recurrence const [isRecurring, setIsRecurring] = useState(!!task?.recurrence) const [recurrenceType, setRecurrenceType] = useState<"daily" | "weekly" | "monthly" | "yearly">( task?.recurrence?.type || "daily", ) const [recurrenceInterval, setRecurrenceInterval] = useState(task?.recurrence?.interval || 1) const [recurrenceEndDate, setRecurrenceEndDate] = useState( task?.recurrence?.endDate ? new Date(task.recurrence.endDate) : undefined, ) useEffect(() => { // Focus the title input when the form opens const timer = setTimeout(() => { const titleInput = document.getElementById("task-title") if (titleInput) { titleInput.focus() } }, 100) return () => clearTimeout(timer) }, []) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (!title.trim()) return const recurrence = isRecurring ? { type: recurrenceType, interval: recurrenceInterval, endDate: recurrenceEndDate ? recurrenceEndDate.toISOString() : null, } : null const taskData = { id: task?.id || "", title, description, categoryId, priority, status, dueDate: dueDate ? dueDate.toISOString() : new Date().toISOString(), createdAt: task?.createdAt || new Date().toISOString(), recurrence, dependsOn: dependsOn.length > 0 ? dependsOn : undefined, tags: selectedTags.length > 0 ? selectedTags : undefined, estimatedTime: estimatedTime > 0 ? estimatedTime : undefined, attachments: attachments.length > 0 ? attachments : undefined, completedAt: task?.completedAt || null, } if (task) { updateTask(taskData) } else { addTask(taskData) } onClose() } const handleFileChange = (e: React.ChangeEvent) => { const files = e.target.files if (!files || files.length === 0) return const newAttachments: Attachment[] = [] Array.from(files).forEach((file) => { // In a real app, you would upload the file to a server here // For this demo, we'll just create a fake URL const attachment: Attachment = { id: generateId(), name: file.name, type: file.type, url: URL.createObjectURL(file), size: file.size, createdAt: new Date().toISOString(), } newAttachments.push(attachment) }) setAttachments([...attachments, ...newAttachments]) // Reset the input e.target.value = "" } const removeAttachment = (id: string) => { setAttachments(attachments.filter((attachment) => attachment.id !== id)) } // Animation variants const overlayVariants = { hidden: { opacity: 0 }, visible: { opacity: 1 }, } const formVariants = { hidden: { opacity: 0, scale: 0.95 }, visible: { opacity: 1, scale: 1, transition: { type: "spring", stiffness: 300, damping: 30, }, }, exit: { opacity: 0, scale: 0.95, transition: { duration: 0.2, }, }, } return (

{task ? "Edit Task" : "Create New Task"}

Title setTitle(e.target.value)} placeholder="Task title" required className="w-full backdrop-blur-md bg-slate-800/50 border-slate-700" />

Description

setDescription(e.target.value)}
              placeholder="Task description (optional)"
              rows={3}
              className="w-full backdrop-blur-md bg-slate-800/50 border-slate-700"
            />
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="space-y-2">
              <label htmlFor="task-category" className="block text-sm font-medium text-slate-300">
                Category
              </label>
              <Select value={categoryId} onValueChange={setCategoryId}>
                <SelectTrigger className="backdrop-blur-md bg-slate-800/50 border-slate-700">
                  <SelectValue placeholder="Select a category" />
                </SelectTrigger>
                <SelectContent>
                  {categories.map((category) => (
                    <SelectItem key={category.id} value={category.id}>
                      <div className="flex items-center">
                        <div className="w-3 h-3 rounded-full mr-2" style={{ backgroundColor: category.color }} />
                        {category.name}
                      </div>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <label htmlFor="task-priority" className="block text-sm font-medium text-slate-300">
                Priority
              </label>
              <Select value={priority} onValueChange={setPriority}>
                <SelectTrigger className="backdrop-blur-md bg-slate-800/50 border-slate-700">
                  <SelectValue placeholder="Select priority" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="low">Low</SelectItem>
                  <SelectItem value="medium">Medium</SelectItem>
                  <SelectItem value="high">High</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <label htmlFor="task-status" className="block text-sm font-medium text-slate-300">
                Status
              </label>
              <Select value={status} onValueChange={setStatus}>
                <SelectTrigger className="backdrop-blur-md bg-slate-800/50 border-slate-700">
                  <SelectValue placeholder="Select status" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="todo">To Do</SelectItem>
                  <SelectItem value="inprogress">In Progress</SelectItem>
                  <SelectItem value="completed">Completed</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <label className="block text-sm font-medium text-slate-300">Due Date</label>
              <Popover open={isOpen} onOpenChange={setIsOpen}>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    className={cn(
                      "w-full justify-start text-left font-normal backdrop-blur-md bg-slate-800/50 border-slate-700",
                      !date && "text-muted-foreground",
                    )}
                  >
                    <Calendar className="mr-2 h-4 w-4" />
                    {date ? format(date, "PPP") : "Select a date"}
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0" align="start">
                  <CalendarComponent
                    mode="single"
                    selected={date}
                    onSelect={(date) => {
                      setDate(date)
                      setDueDate(date)
                      setIsOpen(false)
                    }}
                    initialFocus
                  />
                </PopoverContent>
              </Popover>
            </div>
          </div>

<div className="space-y-2">
            <label className="block text-sm font-medium text-slate-300">Estimated Time (minutes)</label>
            <Input
              type="number"
              min="0"
              value={estimatedTime}
              onChange={(e) => setEstimatedTime(Number.parseInt(e.target.value) || 0)}
              placeholder="Estimated time in minutes"
              className="w-full backdrop-blur-md bg-slate-800/50 border-slate-700"
            />
          </div>

<div className="space-y-2">
            <label className="block text-sm font-medium text-slate-300">Tags</label>
            <div className="flex flex-wrap gap-2">
              {tags.map((tag) => (
                <div
                  key={tag.id}
                  className={`px-3 py-1 rounded-full text-sm font-medium cursor-pointer transition-colors ${
                    selectedTags.includes(tag.id) ? "bg-opacity-100" : "bg-opacity-20"
                  }`}
                  style={{
                    backgroundColor: selectedTags.includes(tag.id) ? tag.color : `${tag.color}20`,
                    color: selectedTags.includes(tag.id) ? "white" : tag.color,
                  }}
                  onClick={() => {
                    if (selectedTags.includes(tag.id)) {
                      setSelectedTags(selectedTags.filter((id) => id !== tag.id))
                    } else {
                      setSelectedTags([...selectedTags, tag.id])
                    }
                  }}
                >
                  {tag.name}
                </div>
              ))}
            </div>
          </div>

<div className="space-y-2">
            <div className="flex items-center space-x-2">
              <Checkbox
                id="is-recurring"
                checked={isRecurring}
                onCheckedChange={(checked) => setIsRecurring(!!checked)}
              />
              <label
                htmlFor="is-recurring"
                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-slate-300"
              >
                Recurring Task
              </label>
            </div>

{isRecurring && (
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4 p-4 rounded-lg border border-slate-700">
                <div className="space-y-2">
                  <label className="block text-sm font-medium text-slate-300">Recurrence Type</label>
                  <Select
                    value={recurrenceType}
                    onValueChange={(value: "daily" | "weekly" | "monthly" | "yearly") => setRecurrenceType(value)}
                  >
                    <SelectTrigger className="backdrop-blur-md bg-slate-800/50 border-slate-700">
                      <SelectValue placeholder="Select type" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="daily">Daily</SelectItem>
                      <SelectItem value="weekly">Weekly</SelectItem>
                      <SelectItem value="monthly">Monthly</SelectItem>
                      <SelectItem value="yearly">Yearly</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <label className="block text-sm font-medium text-slate-300">Repeat Every</label>
                  <div className="flex items-center gap-2">
                    <Input
                      type="number"
                      min="1"
                      value={recurrenceInterval}
                      onChange={(e) => setRecurrenceInterval(Number.parseInt(e.target.value) || 1)}
                      className="w-20 backdrop-blur-md bg-slate-800/50 border-slate-700"
                    />
                    <span className="text-slate-300">
                      {recurrenceType === "daily"
                        ? "days"
                        : recurrenceType === "weekly"
                          ? "weeks"
                          : recurrenceType === "monthly"
                            ? "months"
                            : "years"}
                    </span>
                  </div>
                </div>

<div className="space-y-2 md:col-span-2">
                  <label className="block text-sm font-medium text-slate-300">End Date (Optional)</label>
                  <Popover>
                    <PopoverTrigger asChild>
                      <Button
                        variant="outline"
                        className={cn(
                          "w-full justify-start text-left font-normal backdrop-blur-md bg-slate-800/50 border-slate-700",
                          !recurrenceEndDate && "text-muted-foreground",
                        )}
                      >
                        <Calendar className="mr-2 h-4 w-4" />
                        {recurrenceEndDate ? format(recurrenceEndDate, "PPP") : "No end date"}
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="w-auto p-0" align="start">
                      <div className="p-2 flex justify-between items-center border-b">
                        <span className="text-sm font-medium">End Date</span>
                        {recurrenceEndDate && (
                          <Button variant="ghost" size="sm" onClick={() => setRecurrenceEndDate(undefined)}>
                            Clear
                          </Button>
                        )}
                      </div>
                      <CalendarComponent
                        mode="single"
                        selected={recurrenceEndDate}
                        onSelect={setRecurrenceEndDate}
                        initialFocus
                        disabled={(date) => date < new Date()}
                      />
                    </PopoverContent>
                  </Popover>
                </div>
              </div>
            )}
          </div>

<div className="space-y-2">
            <label className="block text-sm font-medium text-slate-300">Dependencies</label>
            <Select
              value={dependsOn.length > 0 ? dependsOn[0] : ""}
              onValueChange={(value) => {
                if (value) {
                  setDependsOn([...dependsOn.filter((id) => id !== value), value])
                }
              }}
            >
              <SelectTrigger className="backdrop-blur-md bg-slate-800/50 border-slate-700">
                <SelectValue placeholder="Add dependency" />
              </SelectTrigger>
              <SelectContent>
                {tasks
                  .filter((t) => t.id !== taskId && !dependsOn.includes(t.id))
                  .map((t) => (
                    <SelectItem key={t.id} value={t.id}>
                      {t.title}
                    </SelectItem>
                  ))}
              </SelectContent>
            </Select>

{dependsOn.length > 0 && (
              <div className="mt-2 space-y-2">
                <p className="text-sm text-slate-400">This task depends on:</p>
                <ul className="space-y-1">
                  {dependsOn.map((id) => {
                    const dependencyTask = tasks.find((t) => t.id === id)
                    return (
                      <li key={id} className="flex items-center justify-between text-sm p-2 rounded-lg bg-slate-700">
                        <span>{dependencyTask?.title || "Unknown task"}</span>
                        <Button
                          variant="ghost"
                          size="icon"
                          onClick={() => setDependsOn(dependsOn.filter((depId) => depId !== id))}
                        >
                          <X className="h-4 w-4" />
                        </Button>
                      </li>
                    )
                  })}
                </ul>
              </div>
            )}
          </div>

<div className="space-y-2">
            <label className="block text-sm font-medium text-slate-300">Attachments</label>
            <div className="flex items-center gap-2">
              <label
                htmlFor="file-upload"
                className="cursor-pointer inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-700 hover:bg-slate-600 transition-colors"
              >
                <Paperclip className="h-4 w-4" />
                <span>Add Attachment</span>
              </label>
              <input id="file-upload" type="file" className="hidden" onChange={handleFileChange} multiple />
            </div>

{attachments.length > 0 && (
              <div className="mt-2 space-y-2">
                <p className="text-sm text-slate-400">Attached files:</p>
                <ul className="space-y-2">
                  {attachments.map((attachment) => (
                    <li
                      key={attachment.id}
                      className="flex items-center justify-between text-sm p-3 rounded-lg bg-slate-700"
                    >
                      <div className="flex items-center gap-2">
                        <Paperclip className="h-4 w-4 text-slate-400" />
                        <div>
                          <p className="font-medium">{attachment.name}</p>
                          <p className="text-xs text-slate-400">{formatFileSize(attachment.size)}</p>
                        </div>
                      </div>
                      <Button variant="ghost" size="icon" onClick={() => removeAttachment(attachment.id)}>
                        <Trash2 className="h-4 w-4 text-red-500" />
                      </Button>
                    </li>
                  ))}
                </ul>
              </div>
            )}
          </div>

<div className="flex justify-end gap-3 pt-4">
            <Button type="button" variant="outline" onClick={onClose}>
              Cancel
            </Button>
            <Button
              type="submit"
              className="bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600 text-white"
            >
              {task ? "Update Task" : "Create Task"}
            </Button>
          </div>
        </form>
      </motion.div>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="lib/types.ts" isEdit="true" isMerged="true"
export interface Task {
  id: string
  title: string
  description: string
  categoryId: string
  priority: string
  status: string
  dueDate: string
  createdAt: string
  // New fields
  recurrence?: RecurrencePattern | null
  dependsOn?: string[] // IDs of tasks this task depends on
  attachments?: Attachment[]
  tags?: string[]
  estimatedTime?: number // in minutes
  completedAt?: string | null
  notes?: string // Additional notes for the task
  subTasks?: SubTask[] // Nested subtasks
  template?: boolean // Whether this task is a template
}

export interface SubTask {
  id: string
  title: string
  completed: boolean
}

export interface RecurrencePattern {
  type: "daily" | "weekly" | "monthly" | "yearly"
  interval: number // every X days/weeks/months/years
  endDate?: string | null // optional end date
  daysOfWeek?: number[] // for weekly recurrence (0 = Sunday, 6 = Saturday)
  dayOfMonth?: number // for monthly recurrence
}

export interface Attachment {
  id: string
  name: string
  type: string
  url: string
  size: number // in bytes
  createdAt: string
}

export interface Category {
  id: string
  name: string
  color: string
}

export interface Tag {
  id: string
  name: string
  color: string
}

export interface TaskStatistics {
  total: number
  completed: number
  overdue: number
  upcoming: number
  byCategory: {
    [categoryId: string]: number
  }
  byPriority: {
    high: number
    medium: number
    low: number
  }
  byStatus: {
    todo: number
    inprogress: number
    completed: number
  }
  completionRate: number // percentage of completed tasks
  averageCompletionTime?: number // average time to complete tasks in days
}

export interface TaskTemplate {
  id: string
  name: string
  description: string
  tasks: Omit<Task, "id" | "createdAt" | "dueDate">[]
}

[V0_FILE]typescriptreact:file="lib/utils.ts" isEdit="true" isMerged="true"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
import {
  formatDistanceToNow,
  format,
  isToday,
  isTomorrow,
  isPast,
  isThisWeek,
  addDays,
  addWeeks,
  addMonths,
  addYears,
  differenceInDays,
} from "date-fns"
import type { Task, RecurrencePattern, TaskStatistics } from "@/lib/types"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

export function generateId() {
  return Math.random().toString(36).substring(2, 9)
}

export function formatDate(dateString: string) {
  const date = new Date(dateString)

if (isToday(date)) {
    return "Today"
  }

if (isTomorrow(date)) {
    return "Tomorrow"
  }

if (isThisWeek(date)) {
    return format(date, "EEEE") // Day name
  }

return format(date, "MMM d") // Jan 1
}

export function formatRelativeTime(dateString: string) {
  const date = new Date(dateString)

if (isPast(date) && !isToday(date)) {
    return `${formatDistanceToNow(date)} ago`
  }

return `in ${formatDistanceToNow(date)}`
}

export function formatFileSize(bytes: number): string {
  if (bytes === 0) return "0 Bytes"

const k = 1024
  const sizes = ["Bytes", "KB", "MB", "GB"]
  const i = Math.floor(Math.log(bytes) / Math.log(k))

return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
}

export function getNextOccurrence(dueDate: string, recurrence: RecurrencePattern): Date {
  const date = new Date(dueDate)

switch (recurrence.type) {
    case "daily":
      return addDays(date, recurrence.interval)
    case "weekly":
      return addWeeks(date, recurrence.interval)
    case "monthly":
      return addMonths(date, recurrence.interval)
    case "yearly":
      return addYears(date, recurrence.interval)
    default:
      return date
  }
}

export function createRecurringTask(task: Task): Task {
  if (!task.recurrence) return task

const nextDueDate = getNextOccurrence(task.dueDate, task.recurrence)

// Check if we've reached the end date
  if (task.recurrence.endDate && new Date(task.recurrence.endDate) < nextDueDate) {
    return task
  }

return {
    ...task,
    id: generateId(),
    dueDate: nextDueDate.toISOString(),
    status: "todo",
    completedAt: null,
    createdAt: new Date().toISOString(),
  }
}

export function checkTaskDependencies(task: Task, tasks: Task[]): boolean {
  if (!task.dependsOn || task.dependsOn.length === 0) return true

return task.dependsOn.every((dependencyId) => {
    const dependencyTask = tasks.find((t) => t.id === dependencyId)
    return dependencyTask && dependencyTask.status === "completed"
  })
}

export function getFileTypeIcon(fileType: string): string {
  const type = fileType.toLowerCase()

if (type.includes("image")) return "image"
  if (type.includes("pdf")) return "file-text"
  if (type.includes("word") || type.includes("document")) return "file-text"
  if (type.includes("excel") || type.includes("sheet")) return "file-spreadsheet"
  if (type.includes("video")) return "video"
  if (type.includes("audio")) return "audio"
  if (type.includes("zip") || type.includes("archive")) return "archive"

return "file"
}

export function getRecurrenceText(recurrence: RecurrencePattern): string {
  if (!recurrence) return ""

const { type, interval } = recurrence

switch (type) {
    case "daily":
      return interval === 1 ? "Daily" : `Every ${interval} days`
    case "weekly":
      return interval === 1 ? "Weekly" : `Every ${interval} weeks`
    case "monthly":
      return interval === 1 ? "Monthly" : `Every ${interval} months`
    case "yearly":
      return interval === 1 ? "Yearly" : `Every ${interval} years`
    default:
      return ""
  }
}

export function calculateTaskStatistics(tasks: Task[]): TaskStatistics {
  const now = new Date()
  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())

// Initialize statistics
  const statistics: TaskStatistics = {
    total: tasks.length,
    completed: 0,
    overdue: 0,
    upcoming: 0,
    byCategory: {},
    byPriority: {
      high: 0,
      medium: 0,
      low: 0,
    },
    byStatus: {
      todo: 0,
      inprogress: 0,
      completed: 0,
    },
    completionRate: 0,
  }

// Calculate completion times for completed tasks
  const completionTimes: number[] = []

// Process each task
  tasks.forEach((task) => {
    // Count by status
    statistics.byStatus[task.status as keyof typeof statistics.byStatus]++

// Count by priority
    statistics.byPriority[task.priority as keyof typeof statistics.byPriority]++

// Count by category
    if (!statistics.byCategory[task.categoryId]) {
      statistics.byCategory[task.categoryId] = 0
    }
    statistics.byCategory[task.categoryId]++

// Check if completed
    if (task.status === "completed") {
      statistics.completed++

// Calculate completion time if we have both creation and completion dates
      if (task.createdAt && task.completedAt) {
        const createdDate = new Date(task.createdAt)
        const completedDate = new Date(task.completedAt)
        const daysToComplete = differenceInDays(completedDate, createdDate)
        completionTimes.push(daysToComplete)
      }
    }

// Check if overdue (not completed and past due date)
    if (task.status !== "completed" && new Date(task.dueDate) < today) {
      statistics.overdue++
    }

// Check if upcoming (due in the next 7 days)
    const dueDate = new Date(task.dueDate)
    const sevenDaysFromNow = addDays(today, 7)
    if (task.status !== "completed" && dueDate >= today && dueDate <= sevenDaysFromNow) {
      statistics.upcoming++
    }
  })

// Calculate completion rate
  statistics.completionRate = tasks.length > 0 ? Math.round((statistics.completed / tasks.length) * 100) : 0

// Calculate average completion time
  if (completionTimes.length > 0) {
    const totalDays = completionTimes.reduce((sum, days) => sum + days, 0)
    statistics.averageCompletionTime = Math.round((totalDays / completionTimes.length) * 10) / 10
  }

return statistics
}

export function downloadAsFile(content: string, filename: string, contentType: string) {
  const blob = new Blob([content], { type: contentType })
  const url = URL.createObjectURL(blob)

const a = document.createElement("a")
  a.href = url
  a.download = filename
  a.click()

URL.revokeObjectURL(url)
}

[V0_FILE]typescriptreact:file="components/theme-toggle.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Moon, Sun } from "lucide-react"
import { Button } from "@/components/ui/button"

export default function ThemeToggle() {
  const [theme, setTheme] = useState("light")

useEffect(() => {
    const savedTheme = localStorage.getItem("theme") || "light"
    setTheme(savedTheme)
    document.documentElement.classList.toggle("dark", savedTheme === "dark")
  }, [])

const toggleTheme = () => {
    const newTheme = theme === "light" ? "dark" : "light"
    setTheme(newTheme)
    localStorage.setItem("theme", newTheme)
    document.documentElement.classList.toggle("dark", newTheme === "dark")
  }

return (
    <Button
      variant="ghost"
      size="icon"
      onClick={toggleTheme}
      className="rounded-full w-10 h-10 backdrop-blur-md bg-white/30 dark:bg-slate-800/30 hover:bg-white/50 dark:hover:bg-slate-800/50 border border-slate-200/50 dark:border-slate-700/50"
    >
      {theme === "light" ? <Moon className="h-5 w-5" /> : <Sun className="h-5 w-5" />}
      <span className="sr-only">Toggle theme</span>
    </Button>
  )
}

[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true"
import type React from "react"
import "@/app/globals.css"
import { Inter } from "next/font/google"
import { TaskProvider } from "@/context/task-context"

const inter = Inter({ subsets: ["latin"] })

export const metadata = {
  title: "Task Management App",
  description: "A beautiful task management application with Apple-inspired design",
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" className="dark" suppressHydrationWarning>
      <body className={inter.className}>
        <TaskProvider>{children}</TaskProvider>
      </body>
    </html>
  )
}

[V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.75rem;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Glass morphism effects */
.glass-card {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
}

.dark .glass-card {
  background: rgba(17, 25, 40, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Glow effects */
.glow {
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}

.dark .glow {
  box-shadow: 0 0 15px rgba(96, 165, 250, 0.3);
}

/* Logo glow effect */
.shadow-glow {
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
}

/* Button glow effects */
button:hover.glow-hover {
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
}

.dark button:hover.glow-hover {
  box-shadow: 0 0 15px rgba(96, 165, 250, 0.3);
}

/* Task card hover effects */
.task-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.task-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Smooth transitions */
* {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter,
    backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Page transitions */
.page-transition-enter {
  opacity: 0;
  transform: translateY(10px);
}

.page-transition-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 300ms, transform 300ms;
}

.page-transition-exit {
  opacity: 1;
  transform: translateY(0);
}

.page-transition-exit-active {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 300ms, transform 300ms;
}

/* Animation utilities */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes zoomIn {
  from {
    transform: scale(0.95);
  }
  to {
    transform: scale(1);
  }
}

@keyframes zoomOut {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.95);
  }
}

.animate-in {
  animation: fadeIn 0.2s ease-out, zoomIn 0.2s ease-out;
}

.animate-out {
  animation: fadeOut 0.2s ease-in, zoomOut 0.2s ease-in;
}

/* Override default dropdown animations */
[data-radix-popper-content-wrapper] {
  transform-origin: var(--radix-popper-transform-origin);
}

/* Custom Scrollbar Styling */
/* For WebKit browsers (Chrome, Safari, newer versions of Opera) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--secondary));
  border-radius: 8px;
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.4);
  border-radius: 8px;
  border: 2px solid hsl(var(--secondary));
  transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.6);
}

::-webkit-scrollbar-corner {
  background: hsl(var(--secondary));
}

/* For Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--muted-foreground) / 0.4) hsl(var(--secondary));
}

/* For Edge and IE */
body {
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

/* Thin scrollbars for specific containers */
.thin-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.thin-scrollbar {
  scrollbar-width: thin;
}

[V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config

[V0_FILE]typescriptreact:file="components/task-detail.tsx" isEdit="true" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { X, Edit, Trash2, Calendar, Clock, Tag, CheckCircle, Circle, AlertCircle, Paperclip, Link } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useTaskContext } from "@/context/task-context"
import { formatRelativeTime, getRecurrenceText, formatFileSize, checkTaskDependencies } from "@/lib/utils"
import { format } from "date-fns"

interface TaskDetailProps {
  taskId: string
  onClose: () => void
  onEdit: (id: string) => void
}

export default function TaskDetail({ taskId, onClose, onEdit }: TaskDetailProps) {
  const { tasks, categories, tags, toggleTaskStatus, deleteTask } = useTaskContext()

const task = tasks.find((t) => t.id === taskId)
  if (!task) return null

const category = categories.find((c) => c.id === task.categoryId)

const getTagById = (id: string) => {
    return tags.find((tag) => tag.id === id)
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "completed":
        return <CheckCircle className="h-5 w-5 text-green-500" />
      case "inprogress":
        return <AlertCircle className="h-5 w-5 text-amber-500" />
      default:
        return <Circle className="h-5 w-5 text-slate-400" />
    }
  }

const isPastDue = (dueDate: string) => {
    const now = new Date()
    const due = new Date(dueDate)
    return due < now && due.toDateString() !== now.toDateString()
  }

const canCompleteTask = checkTaskDependencies(task, tasks)

// Get dependent tasks (tasks that depend on this task)
  const dependentTasks = tasks.filter((t) => t.dependsOn?.includes(task.id))

// Animation variants
  const sidebarVariants = {
    hidden: { x: "100%", opacity: 0 },
    visible: {
      x: 0,
      opacity: 1,
      transition: {
        type: "spring",
        stiffness: 300,
        damping: 30,
      },
    },
    exit: {
      x: "100%",
      opacity: 0,
      transition: {
        duration: 0.2,
      },
    },
  }

return (
    <motion.div
      className="fixed top-0 right-0 h-full z-40 w-full sm:w-96 md:w-[32rem] backdrop-blur-xl bg-slate-800/90 border-l border-slate-700/50 overflow-y-auto thin-scrollbar"
      initial="hidden"
      animate="visible"
      exit="exit"
      variants={sidebarVariants}
    >
      <div className="sticky top-0 z-10 backdrop-blur-md bg-slate-800/80 border-b border-slate-700/50 p-4 flex justify-between items-center">
        <h2 className="text-xl font-semibold text-white">Task Details</h2>
        <Button variant="ghost" size="icon" onClick={onClose}>
          <X className="h-5 w-5" />
        </Button>
      </div>

<div className="p-6 space-y-6">
        <div className="flex items-center gap-3">
          <Button
            variant="ghost"
            size="icon"
            className="mt-0.5"
            onClick={() => toggleTaskStatus(task.id)}
            disabled={task.status !== "completed" && !canCompleteTask}
            title={!canCompleteTask ? "Complete dependent tasks first" : ""}
          >
            {getStatusIcon(task.status)}
          </Button>

<div>
            <h1
              className={`text-2xl font-bold text-white ${
                task.status === "completed" ? "line-through text-slate-400" : ""
              }`}
            >
              {task.title}
            </h1>

{category && (
              <div className="flex items-center mt-1">
                <Tag className="h-4 w-4 mr-1" style={{ color: category.color }} />
                <span className="text-slate-300">{category.name}</span>
              </div>
            )}
          </div>
        </div>

<div className="flex flex-wrap gap-3">
          <Button variant="outline" size="sm" onClick={() => onEdit(task.id)} className="flex items-center gap-1">
            <Edit className="h-4 w-4" />
            Edit
          </Button>

<Button
            variant="outline"
            size="sm"
            onClick={() => {
              if (confirm("Are you sure you want to delete this task?")) {
                deleteTask(task.id)
                onClose()
              }
            }}
            className="flex items-center gap-1 text-red-500 hover:text-red-600 hover:bg-red-950"
          >
            <Trash2 className="h-4 w-4" />
            Delete
          </Button>
        </div>

{task.description && (
          <div className="space-y-2">
            <h3 className="text-sm font-medium text-slate-400">Description</h3>
            <div className="p-4 rounded-lg bg-slate-900 text-slate-300">{task.description}</div>
          </div>
        )}

<div className="grid grid-cols-2 gap-4">
          <div className="space-y-1">
            <h3 className="text-sm font-medium text-slate-400">Due Date</h3>
            <div
              className={`flex items-center ${isPastDue(task.dueDate) && task.status !== "completed" ? "text-red-500" : "text-slate-300"}`}
            >
              <Calendar className="h-4 w-4 mr-2" />
              {format(new Date(task.dueDate), "PPP")}
            </div>
          </div>

<div className="space-y-1">
            <h3 className="text-sm font-medium text-slate-400">Time Remaining</h3>
            <div className="flex items-center text-slate-300">
              <Clock className="h-4 w-4 mr-2" />
              {formatRelativeTime(task.dueDate)}
            </div>
          </div>

<div className="space-y-1">
            <h3 className="text-sm font-medium text-slate-400">Priority</h3>
            <div
              className={`px-3 py-1 rounded-full text-sm font-medium inline-flex ${
                task.priority === "high"
                  ? "bg-red-900/30 text-red-300"
                  : task.priority === "medium"
                    ? "bg-amber-900/30 text-amber-300"
                    : "bg-blue-900/30 text-blue-300"
              }`}
            >
              {task.priority.charAt(0).toUpperCase() + task.priority.slice(1)}
            </div>
          </div>

<div className="space-y-1">
            <h3 className="text-sm font-medium text-slate-400">Status</h3>
            <div className="flex items-center text-slate-300">
              {getStatusIcon(task.status)}
              <span className="ml-2">
                {task.status === "todo" ? "To Do" : task.status === "inprogress" ? "In Progress" : "Completed"}
              </span>
            </div>
          </div>

{task.estimatedTime && (
            <div className="space-y-1">
              <h3 className="text-sm font-medium text-slate-400">Estimated Time</h3>
              <div className="flex items-center text-slate-300">
                <Clock className="h-4 w-4 mr-2" />
                {task.estimatedTime} minutes
              </div>
            </div>
          )}

{task.recurrence && (
            <div className="space-y-1">
              <h3 className="text-sm font-medium text-slate-400">Recurrence</h3>
              <div className="flex items-center text-slate-300">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="mr-2 h-4 w-4"
                >
                  <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path>
                  <path d="M3 3v5h5"></path>
                </svg>
                <span>{getRecurrenceText(task.recurrence)}</span>
              </div>
            </div>
          )}
        </div>

{task.tags && task.tags.length > 0 && (
          <div className="space-y-2">
            <h3 className="text-sm font-medium text-slate-400">Tags</h3>
            <div className="flex flex-wrap gap-2">
              {task.tags.map((tagId) => {
                const tag = getTagById(tagId)
                if (!tag) return null

return (
                  <div
                    key={tagId}
                    className="px-3 py-1 rounded-full text-sm font-medium"
                    style={{
                      backgroundColor: `${tag.color}20`,
                      color: tag.color,
                    }}
                  >
                    {tag.name}
                  </div>
                )
              })}
            </div>
          </div>
        )}

{task.dependsOn && task.dependsOn.length > 0 && (
          <div className="space-y-2">
            <h3 className="text-sm font-medium text-slate-400">Dependencies</h3>
            <ul className="space-y-2">
              {task.dependsOn.map((dependencyId) => {
                const dependencyTask = tasks.find((t) => t.id === dependencyId)
                if (!dependencyTask) return null

return (
                  <li key={dependencyId} className="p-3 rounded-lg bg-slate-900 flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      {getStatusIcon(dependencyTask.status)}
                      <span className={dependencyTask.status === "completed" ? "line-through text-slate-500" : ""}>
                        {dependencyTask.title}
                      </span>
                    </div>
                    <div
                      className={`text-xs px-2 py-0.5 rounded-full ${
                        dependencyTask.status === "completed"
                          ? "bg-green-900/30 text-green-300"
                          : "bg-amber-900/30 text-amber-300"
                      }`}
                    >
                      {dependencyTask.status === "completed" ? "Completed" : "Pending"}
                    </div>
                  </li>
                )
              })}
            </ul>
          </div>
        )}

{dependentTasks.length > 0 && (
          <div className="space-y-2">
            <h3 className="text-sm font-medium text-slate-400">Dependent Tasks</h3>
            <p className="text-xs text-slate-400">These tasks depend on this task being completed:</p>
            <ul className="space-y-2">
              {dependentTasks.map((depTask) => (
                <li key={depTask.id} className="p-3 rounded-lg bg-slate-900 flex items-center gap-2">
                  <Link className="h-4 w-4 text-slate-400" />
                  <span>{depTask.title}</span>
                </li>
              ))}
            </ul>
          </div>
        )}

{task.attachments && task.attachments.length > 0 && (
          <div className="space-y-2">
            <h3 className="text-sm font-medium text-slate-400">Attachments</h3>
            <ul className="space-y-2">
              {task.attachments.map((attachment) => (
                <li
                  key={attachment.id}
                  className="flex items-center justify-between text-sm p-3 rounded-lg bg-slate-900"
                >
                  <div className="flex items-center gap-2">
                    <Paperclip className="h-4 w-4 text-slate-400" />
                    <div>
                      <p className="font-medium">{attachment.name}</p>
                      <p className="text-xs text-slate-400">{formatFileSize(attachment.size)}</p>
                    </div>
                  </div>
                  <Button variant="outline" size="sm" onClick={() => window.open(attachment.url, "_blank")}>
                    View
                  </Button>
                </li>
              ))}
            </ul>
          </div>
        )}

<div className="space-y-1 pt-4 border-t border-slate-700">
          <div className="flex justify-between text-xs text-slate-400">
            <span>Created: {format(new Date(task.createdAt), "PPP")}</span>
            {task.completedAt && <span>Completed: {format(new Date(task.completedAt), "PPP")}</span>}
          </div>
        </div>
      </div>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="hooks/use-media-query.ts" isMerged="true"
"use client"

import { useState, useEffect } from "react"

export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(false)

useEffect(() => {
    const media = window.matchMedia(query)
    if (media.matches !== matches) {
      setMatches(media.matches)
    }

const listener = () => setMatches(media.matches)
    media.addEventListener("change", listener)

return () => media.removeEventListener("change", listener)
  }, [matches, query])

return matches
}

[V0_FILE]typescriptreact:file="context/task-context.tsx" isMerged="true"
"use client"

import { createContext, useContext, useState, useEffect, type ReactNode } from "react"
import type { Task, Category, Tag, TaskStatistics } from "@/lib/types"
import { generateId, createRecurringTask, calculateTaskStatistics } from "@/lib/utils"
import { sampleTasks, sampleCategories, sampleTags } from "@/lib/sample-data"

interface TaskContextType {
  tasks: Task[]
  categories: Category[]
  tags: Tag[]
  statistics: TaskStatistics
  addTask: (task: Omit<Task, "id">) => void
  updateTask: (task: Task) => void
  deleteTask: (id: string) => void
  toggleTaskStatus: (id: string) => void
  exportTasks: () => string
  importTasks: (jsonData: string) => boolean
  duplicateTask: (id: string) => void
  bulkDeleteTasks: (ids: string[]) => void
  bulkUpdateTaskStatus: (ids: string[], status: string) => void
  bulkUpdateTaskCategory: (ids: string[], categoryId: string) => void
  bulkUpdateTaskPriority: (ids: string[], priority: string) => void
  addCategory: (category: Omit<Category, "id">) => void
  updateCategory: (category: Category) => void
  deleteCategory: (id: string) => void
  addTag: (tag: Omit<Tag, "id">) => void
  updateTag: (tag: Tag) => void
  deleteTag: (id: string) => void
}

const TaskContext = createContext<TaskContextType | undefined>(undefined)

export function TaskProvider({ children }: { children: ReactNode }) {
  const [tasks, setTasks] = useState<Task[]>(() => {
    if (typeof window !== "undefined") {
      const savedTasks = localStorage.getItem("tasks")
      return savedTasks ? JSON.parse(savedTasks) : sampleTasks
    }
    return sampleTasks
  })

const [categories, setCategories] = useState<Category[]>(() => {
    if (typeof window !== "undefined") {
      const savedCategories = localStorage.getItem("categories")
      return savedCategories ? JSON.parse(savedCategories) : sampleCategories
    }
    return sampleCategories
  })

const [tags, setTags] = useState<Tag[]>(() => {
    if (typeof window !== "undefined") {
      const savedTags = localStorage.getItem("tags")
      return savedTags ? JSON.parse(savedTags) : sampleTags
    }
    return sampleTags
  })

const [statistics, setStatistics] = useState<TaskStatistics>(() => calculateTaskStatistics(tasks))

// Save to localStorage and update statistics whenever data changes
  useEffect(() => {
    if (typeof window !== "undefined") {
      localStorage.setItem("tasks", JSON.stringify(tasks))
      localStorage.setItem("categories", JSON.stringify(categories))
      localStorage.setItem("tags", JSON.stringify(tags))

// Update statistics
      setStatistics(calculateTaskStatistics(tasks))

// Check for completed recurring tasks and create next occurrences
      const completedRecurringTasks = tasks.filter(
        (task) => task.status === "completed" && task.recurrence && !task.completedAt,
      )

if (completedRecurringTasks.length > 0) {
        const updatedTasks = [...tasks]
        const newTasks: Task[] = []

completedRecurringTasks.forEach((task) => {
          // Mark the completed task
          const taskIndex = updatedTasks.findIndex((t) => t.id === task.id)
          if (taskIndex !== -1) {
            updatedTasks[taskIndex] = {
              ...task,
              completedAt: new Date().toISOString(),
            }
          }

// Create the next occurrence
          const nextTask = createRecurringTask(task)
          if (nextTask.id !== task.id) {
            newTasks.push(nextTask)
          }
        })

if (newTasks.length > 0) {
          setTasks([...updatedTasks, ...newTasks])
        } else {
          setTasks(updatedTasks)
        }
      }
    }
  }, [tasks, categories, tags])

const addTask = (task: Omit<Task, "id">) => {
    const newTask = {
      ...task,
      id: generateId(),
      createdAt: new Date().toISOString(),
    }
    setTasks([...tasks, newTask])
  }

const updateTask = (updatedTask: Task) => {
    setTasks(tasks.map((task) => (task.id === updatedTask.id ? updatedTask : task)))
  }

const deleteTask = (id: string) => {
    setTasks(tasks.filter((task) => task.id !== id))
  }

const toggleTaskStatus = (id: string) => {
    setTasks(
      tasks.map((task) => {
        if (task.id === id) {
          const newStatus = task.status === "completed" ? "todo" : "completed"
          return {
            ...task,
            status: newStatus,
            completedAt: newStatus === "completed" ? new Date().toISOString() : null,
          }
        }
        return task
      }),
    )
  }

const exportTasks = () => {
    const exportData = {
      tasks,
      categories,
      tags,
      exportDate: new Date().toISOString(),
      version: "1.0",
    }
    return JSON.stringify(exportData, null, 2)
  }

const importTasks = (jsonData: string) => {
    try {
      const importedData = JSON.parse(jsonData)

// Validate the imported data
      if (!importedData.tasks || !Array.isArray(importedData.tasks)) {
        return false
      }

// Import tasks
      setTasks(importedData.tasks)

// Import categories if available
      if (importedData.categories && Array.isArray(importedData.categories)) {
        setCategories(importedData.categories)
      }

// Import tags if available
      if (importedData.tags && Array.isArray(importedData.tags)) {
        setTags(importedData.tags)
      }

return true
    } catch (error) {
      console.error("Error importing tasks:", error)
      return false
    }
  }

const duplicateTask = (id: string) => {
    const taskToDuplicate = tasks.find((task) => task.id === id)
    if (!taskToDuplicate) return

const duplicatedTask: Task = {
      ...taskToDuplicate,
      id: generateId(),
      title: `${taskToDuplicate.title} (Copy)`,
      createdAt: new Date().toISOString(),
      status: "todo",
      completedAt: null,
    }

setTasks([...tasks, duplicatedTask])
  }

const bulkDeleteTasks = (ids: string[]) => {
    setTasks(tasks.filter((task) => !ids.includes(task.id)))
  }

const bulkUpdateTaskStatus = (ids: string[], status: string) => {
    setTasks(
      tasks.map((task) => {
        if (ids.includes(task.id)) {
          return {
            ...task,
            status,
            completedAt: status === "completed" ? new Date().toISOString() : null,
          }
        }
        return task
      }),
    )
  }

const bulkUpdateTaskCategory = (ids: string[], categoryId: string) => {
    setTasks(
      tasks.map((task) => {
        if (ids.includes(task.id)) {
          return {
            ...task,
            categoryId,
          }
        }
        return task
      }),
    )
  }

const bulkUpdateTaskPriority = (ids: string[], priority: string) => {
    setTasks(
      tasks.map((task) => {
        if (ids.includes(task.id)) {
          return {
            ...task,
            priority,
          }
        }
        return task
      }),
    )
  }

const addCategory = (category: Omit<Category, "id">) => {
    const newCategory = {
      ...category,
      id: generateId(),
    }
    setCategories([...categories, newCategory])
  }

const updateCategory = (updatedCategory: Category) => {
    setCategories(categories.map((category) => (category.id === updatedCategory.id ? updatedCategory : category)))
  }

const deleteCategory = (id: string) => {
    // First update any tasks that use this category to use the first available category
    const defaultCategoryId = categories.find((c) => c.id !== id)?.id || ""

setTasks(
      tasks.map((task) => {
        if (task.categoryId === id) {
          return {
            ...task,
            categoryId: defaultCategoryId,
          }
        }
        return task
      }),
    )

// Then delete the category
    setCategories(categories.filter((category) => category.id !== id))
  }

const addTag = (tag: Omit<Tag, "id">) => {
    const newTag = {
      ...tag,
      id: generateId(),
    }
    setTags([...tags, newTag])
  }

const updateTag = (updatedTag: Tag) => {
    setTags(tags.map((tag) => (tag.id === updatedTag.id ? updatedTag : tag)))
  }

const deleteTag = (id: string) => {
    // Remove this tag from any tasks that use it
    setTasks(
      tasks.map((task) => {
        if (task.tags && task.tags.includes(id)) {
          return {
            ...task,
            tags: task.tags.filter((tagId) => tagId !== id),
          }
        }
        return task
      }),
    )

// Then delete the tag
    setTags(tags.filter((tag) => tag.id !== id))
  }

return (
    <TaskContext.Provider
      value={{
        tasks,
        categories,
        tags,
        statistics,
        addTask,
        updateTask,
        deleteTask,
        toggleTaskStatus,
        exportTasks,
        importTasks,
        duplicateTask,
        bulkDeleteTasks,
        bulkUpdateTaskStatus,
        bulkUpdateTaskCategory,
        bulkUpdateTaskPriority,
        addCategory,
        updateCategory,
        deleteCategory,
        addTag,
        updateTag,
        deleteTag,
      }}
    >
      {children}
    </TaskContext.Provider>
  )
}

export function useTaskContext() {
  const context = useContext(TaskContext)
  if (context === undefined) {
    throw new Error("useTaskContext must be used within a TaskProvider")
  }
  return context
}

[V0_FILE]typescriptreact:file="lib/sample-data.ts" isMerged="true"
import type { Task, Category, Tag } from "@/lib/types"

export const sampleCategories: Category[] = [
  { id: "1", name: "Work", color: "#FF6B6B" },
  { id: "2", name: "Personal", color: "#4ECDC4" },
  { id: "3", name: "Health", color: "#FFD166" },
  { id: "4", name: "Learning", color: "#6A0572" },
]

export const sampleTags: Tag[] = [
  { id: "1", name: "Important", color: "#FF6B6B" },
  { id: "2", name: "Quick", color: "#4ECDC4" },
  { id: "3", name: "Long-term", color: "#FFD166" },
]

export const sampleTasks: Task[] = [
  {
    id: "task1",
    title: "Complete project proposal",
    description: "Draft and finalize the Q3 marketing campaign proposal with budget estimates and timeline.",
    categoryId: "1", // Work
    priority: "high",
    status: "inprogress",
    dueDate: new Date(Date.now() + 2 * 24 * 60 * 60 * 1000).toISOString(), // 2 days from now
    createdAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(), // 3 days ago
    tags: ["1"], // Important
    estimatedTime: 120, // 2 hours
  },
  {
    id: "task2",
    title: "Morning workout routine",
    description: "30 minutes cardio followed by strength training.",
    categoryId: "3", // Health
    priority: "medium",
    status: "todo",
    dueDate: new Date(new Date().setHours(8, 0, 0, 0)).toISOString(), // Today at 8 AM
    createdAt: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(), // 1 week ago
    recurrence: {
      type: "daily",
      interval: 1,
      endDate: null,
    },
    tags: ["2"], // Quick
  },
  {
    id: "task3",
    title: "Read 'Atomic Habits' chapter 5",
    description: "Take notes on key concepts about habit stacking and implementation intentions.",
    categoryId: "4", // Learning
    priority: "low",
    status: "todo",
    dueDate: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000).toISOString(), // 5 days from now
    createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(), // 2 days ago
    estimatedTime: 45, // 45 minutes
    tags: ["3"], // Long-term
  },
  {
    id: "task4",
    title: "Weekly team meeting",
    description: "Discuss project progress, blockers, and next steps with the development team.",
    categoryId: "1", // Work
    priority: "medium",
    status: "todo",
    dueDate: new Date(Date.now() + 1 * 24 * 60 * 60 * 1000).toISOString(), // Tomorrow
    createdAt: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(), // 5 days ago
    recurrence: {
      type: "weekly",
      interval: 1,
      endDate: null,
    },
    tags: ["1"], // Important
  },
  {
    id: "task5",
    title: "Grocery shopping",
    description: "Buy fruits, vegetables, protein, and snacks for the week.",
    categoryId: "2", // Personal
    priority: "medium",
    status: "completed",
    dueDate: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(), // Yesterday
    createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(), // 2 days ago
    completedAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(), // Completed yesterday
    recurrence: {
      type: "weekly",
      interval: 1,
      endDate: null,
    },
  },
  {
    id: "task6",
    title: "Prepare presentation slides",
    description: "Create slides for the client meeting on the new product features.",
    categoryId: "1", // Work
    priority: "high",
    status: "todo",
    dueDate: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000).toISOString(), // 3 days from now
    createdAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(), // 1 day ago
    dependsOn: ["task1"], // Depends on completing the project proposal
    tags: ["1"], // Important
    estimatedTime: 180, // 3 hours
  },
  {
    id: "task7",
    title: "Pay monthly bills",
    description: "Pay rent, utilities, and subscription services.",
    categoryId: "2", // Personal
    priority: "high",
    status: "todo",
    dueDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString(), // 7 days from now
    createdAt: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString(), // 10 days ago
    recurrence: {
      type: "monthly",
      interval: 1,
      endDate: null,
    },
  },
  {
    id: "task8",
    title: "Schedule dentist appointment",
    description: "Book a check-up and cleaning appointment.",
    categoryId: "3", // Health
    priority: "medium",
    status: "todo",
    dueDate: new Date(Date.now() + 14 * 24 * 60 * 60 * 1000).toISOString(), // 2 weeks from now
    createdAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(), // 3 days ago
  },
  {
    id: "task9",
    title: "Review code pull requests",
    description: "Review and provide feedback on team members' code submissions.",
    categoryId: "1", // Work
    priority: "medium",
    status: "inprogress",
    dueDate: new Date().toISOString(), // Today
    createdAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(), // 1 day ago
    tags: ["2"], // Quick
    estimatedTime: 60, // 1 hour
  },
  {
    id: "task10",
    title: "Plan weekend trip",
    description: "Research destinations, accommodations, and activities for the upcoming weekend getaway.",
    categoryId: "2", // Personal
    priority: "low",
    status: "todo",
    dueDate: new Date(Date.now() + 10 * 24 * 60 * 60 * 1000).toISOString(), // 10 days from now
    createdAt: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(), // 5 days ago
    tags: ["3"], // Long-term
  },
]

[V0_FILE]typescriptreact:file="components/task-statistics-panel.tsx" isMerged="true"
"use client"

import { motion } from "framer-motion"
import { X, BarChart2, CheckCircle, Clock, Tag } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useTaskContext } from "@/context/task-context"

interface TaskStatisticsPanelProps {
  onClose: () => void
}

export default function TaskStatisticsPanel({ onClose }: TaskStatisticsPanelProps) {
  const { statistics, categories } = useTaskContext()

// Animation variants
  const overlayVariants = {
    hidden: { opacity: 0 },
    visible: { opacity: 1 },
  }

const panelVariants = {
    hidden: { opacity: 0, scale: 0.95 },
    visible: {
      opacity: 1,
      scale: 1,
      transition: {
        type: "spring",
        stiffness: 300,
        damping: 30,
      },
    },
    exit: {
      opacity: 0,
      scale: 0.95,
      transition: {
        duration: 0.2,
      },
    },
  }

// Helper function to get category name by ID
  const getCategoryName = (id: string) => {
    return categories.find((cat) => cat.id === id)?.name || "Unknown"
  }

return (
    <motion.div
      className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
      initial="hidden"
      animate="visible"
      exit="hidden"
      variants={overlayVariants}
    >
      <motion.div
        className="w-full max-w-2xl backdrop-blur-xl bg-slate-800/90 rounded-2xl border border-slate-700/50 overflow-hidden"
        initial="hidden"
        animate="visible"
        exit="exit"
        variants={panelVariants}
      >
        <div className="flex justify-between items-center p-6 border-b border-slate-700">
          <h2 className="text-xl font-semibold text-white flex items-center">
            <BarChart2 className="mr-2 h-5 w-5" />
            Task Statistics
          </h2>
          <Button variant="ghost" size="icon" onClick={onClose}>
            <X className="h-5 w-5" />
          </Button>
        </div>

<div className="p-6 max-h-[80vh] overflow-y-auto thin-scrollbar">
          {/* Overview Cards */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
            <div className="backdrop-blur-lg bg-slate-700/50 border border-slate-600/50 rounded-xl p-4">
              <div className="flex items-center justify-between">
                <h3 className="text-sm font-medium text-slate-300">Total Tasks</h3>
                <span className="text-2xl font-bold text-white">{statistics.total}</span>
              </div>
            </div>

<div className="backdrop-blur-lg bg-slate-700/50 border border-slate-600/50 rounded-xl p-4">
              <div className="flex items-center justify-between">
                <h3 className="text-sm font-medium text-slate-300">Completed</h3>
                <span className="text-2xl font-bold text-green-400">{statistics.completed}</span>
              </div>
            </div>

<div className="backdrop-blur-lg bg-slate-700/50 border border-slate-600/50 rounded-xl p-4">
              <div className="flex items-center justify-between">
                <h3 className="text-sm font-medium text-slate-300">Completion Rate</h3>
                <span className="text-2xl font-bold text-blue-400">{statistics.completionRate}%</span>
              </div>
            </div>
          </div>

{/* Status Breakdown */}
          <div className="mb-8">
            <h3 className="text-lg font-medium text-white mb-4">Status Breakdown</h3>
            <div className="space-y-3">
              <div className="flex items-center justify-between">
                <div className="flex items-center">
                  <Clock className="h-4 w-4 mr-2 text-slate-400" />
                  <span className="text-slate-300">To Do</span>
                </div>
                <div className="flex items-center">
                  <span className="text-slate-300 mr-2">{statistics.byStatus.todo}</span>
                  <div className="w-24 h-2 bg-slate-700 rounded-full overflow-hidden">
                    <div
                      className="h-full bg-slate-400 rounded-full"
                      style={{
                        width: `${statistics.total ? (statistics.byStatus.todo / statistics.total) * 100 : 0}%`,
                      }}
                    ></div>
                  </div>
                </div>
              </div>

<div className="flex items-center justify-between">
                <div className="flex items-center">
                  <Clock className="h-4 w-4 mr-2 text-amber-400" />
                  <span className="text-slate-300">In Progress</span>
                </div>
                <div className="flex items-center">
                  <span className="text-slate-300 mr-2">{statistics.byStatus.inprogress}</span>
                  <div className="w-24 h-2 bg-slate-700 rounded-full overflow-hidden">
                    <div
                      className="h-full bg-amber-400 rounded-full"
                      style={{
                        width: `${statistics.total ? (statistics.byStatus.inprogress / statistics.total) * 100 : 0}%`,
                      }}
                    ></div>
                  </div>
                </div>
              </div>

<div className="flex items-center justify-between">
                <div className="flex items-center">
                  <CheckCircle className="h-4 w-4 mr-2 text-green-400" />
                  <span className="text-slate-300">Completed</span>
                </div>
                <div className="flex items-center">
                  <span className="text-slate-300 mr-2">{statistics.byStatus.completed}</span>
                  <div className="w-24 h-2 bg-slate-700 rounded-full overflow-hidden">
                    <div
                      className="h-full bg-green-400 rounded-full"
                      style={{
                        width: `${statistics.total ? (statistics.byStatus.completed / statistics.total) * 100 : 0}%`,
                      }}
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </div>

{/* Priority Breakdown */}
          <div className="mb-8">
            <h3 className="text-lg font-medium text-white mb-4">Priority Breakdown</h3>
            <div className="space-y-3">
              <div className="flex items-center justify-between">
                <div className="flex items-center">
                  <div className="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                  <span className="text-slate-300">High</span>
                </div>
                <div className="flex items-center">
                  <span className="text-slate-300 mr-2">{statistics.byPriority.high}</span>
                  <div className="w-24 h-2 bg-slate-700 rounded-full overflow-hidden">
                    <div
                      className="h-full bg-red-500 rounded-full"
                      style={{
                        width: `${statistics.total ? (statistics.byPriority.high / statistics.total) * 100 : 0}%`,
                      }}
                    ></div>
                  </div>
                </div>
              </div>

<div className="flex items-center justify-between">
                <div className="flex items-center">
                  <div className="w-3 h-3 rounded-full bg-amber-500 mr-2"></div>
                  <span className="text-slate-300">Medium</span>
                </div>
                <div className="flex items-center">
                  <span className="text-slate-300 mr-2">{statistics.byPriority.medium}</span>
                  <div className="w-24 h-2 bg-slate-700 rounded-full overflow-hidden">
                    <div
                      className="h-full bg-amber-500 rounded-full"
                      style={{
                        width: `${statistics.total ? (statistics.byPriority.medium / statistics.total) * 100 : 0}%`,
                      }}
                    ></div>
                  </div>
                </div>
              </div>

<div className="flex items-center justify-between">
                <div className="flex items-center">
                  <div className="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
                  <span className="text-slate-300">Low</span>
                </div>
                <div className="flex items-center">
                  <span className="text-slate-300 mr-2">{statistics.byPriority.low}</span>
                  <div className="w-24 h-2 bg-slate-700 rounded-full overflow-hidden">
                    <div
                      className="h-full bg-blue-500 rounded-full"
                      style={{
                        width: `${statistics.total ? (statistics.byPriority.low / statistics.total) * 100 : 0}%`,
                      }}
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </div>

{/* Category Breakdown */}
          <div className="mb-8">
            <h3 className="text-lg font-medium text-white mb-4">Category Breakdown</h3>
            <div className="space-y-3">
              {Object.entries(statistics.byCategory).map(([categoryId, count]) => (
                <div key={categoryId} className="flex items-center justify-between">
                  <div className="flex items-center">
                    <Tag
                      className="h-4 w-4 mr-2"
                      style={{ color: categories.find((c) => c.id === categoryId)?.color || "#fff" }}
                    />
                    <span className="text-slate-300">{getCategoryName(categoryId)}</span>
                  </div>
                  <div className="flex items-center">
                    <span className="text-slate-300 mr-2">{count}</span>
                    <div className="w-24 h-2 bg-slate-700 rounded-full overflow-hidden">
                      <div
                        className="h-full rounded-full"
                        style={{
                          width: `${statistics.total ? (count / statistics.total) * 100 : 0}%`,
                          backgroundColor: categories.find((c) => c.id === categoryId)?.color || "#fff",
                        }}
                      ></div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

{/* Time Metrics */}
          <div>
            <h3 className="text-lg font-medium text-white mb-4">Time Metrics</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="backdrop-blur-lg bg-slate-700/50 border border-slate-600/50 rounded-xl p-4">
                <div className="flex flex-col">
                  <h4 className="text-sm font-medium text-slate-300 mb-1">Overdue Tasks</h4>
                  <span className="text-2xl font-bold text-red-400">{statistics.overdue}</span>
                </div>
              </div>

<div className="backdrop-blur-lg bg-slate-700/50 border border-slate-600/50 rounded-xl p-4">
                <div className="flex flex-col">
                  <h4 className="text-sm font-medium text-slate-300 mb-1">Upcoming Tasks</h4>
                  <span className="text-2xl font-bold text-blue-400">{statistics.upcoming}</span>
                </div>
              </div>

{statistics.averageCompletionTime !== undefined && (
                <div className="backdrop-blur-lg bg-slate-700/50 border border-slate-600/50 rounded-xl p-4 md:col-span-2">
                  <div className="flex flex-col">
                    <h4 className="text-sm font-medium text-slate-300 mb-1">Average Completion Time</h4>
                    <span className="text-2xl font-bold text-green-400">
                      {statistics.averageCompletionTime} {statistics.averageCompletionTime === 1 ? "day" : "days"}
                    </span>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </motion.div>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="components/import-export-panel.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { motion } from "framer-motion"
import { X, Download, Upload, Check, AlertCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
import { useTaskContext } from "@/context/task-context"
import { downloadAsFile } from "@/lib/utils"

interface ImportExportPanelProps {
  onClose: () => void
}

export default function ImportExportPanel({ onClose }: ImportExportPanelProps) {
  const { exportTasks, importTasks } = useTaskContext()
  const [importData, setImportData] = useState("")
  const [importStatus, setImportStatus] = useState<"idle" | "success" | "error">("idle")
  const [exportMode, setExportMode] = useState(false)

// Animation variants
  const overlayVariants = {
    hidden: { opacity: 0 },
    visible: { opacity: 1 },
  }

const handleExport = () => {
    const exportedData = exportTasks()
    setImportData(exportedData)
    setExportMode(true)
  }

const handleDownload = () => {
    const exportedData = exportTasks()
    const date = new Date().toISOString().split("T")[0]
    downloadAsFile(exportedData, `task-export-${date}.json`, "application/json")
  }

const handleImport = () => {
    try {
      const success = importTasks(importData)
      if (success) {
        setImportStatus("success")
        setTimeout(() => {
          onClose()
        }, 1500)
      } else {
        setImportStatus("error")
      }
    } catch (error) {
      setImportStatus("error")
    }
  }

return (
    <motion.div
      className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
      initial="hidden"
      animate="visible"
      exit="hidden"
      variants={overlayVariants}
    >
      <motion.div
        className="w-full max-w-2xl backdrop-blur-xl bg-slate-800/90 rounded-2xl border border-slate-700/50 overflow-hidden"
        initial="hidden"
        animate="visible"
        exit="exit"
        variants={panelVariants}
      >
        <div className="flex justify-between items-center p-6 border-b border-slate-700">
          <h2 className="text-xl font-semibold text-white flex items-center">
            {exportMode ? (
              <>
                <Download className="mr-2 h-5 w-5" />
                Export Tasks
              </>
            ) : (
              <>
                <Upload className="mr-2 h-5 w-5" />
                Import Tasks
              </>
            )}
          </h2>
          <Button variant="ghost" size="icon" onClick={onClose}>
            <X className="h-5 w-5" />
          </Button>
        </div>

<div className="p-6">
          {exportMode ? (
            <div className="space-y-4">
              <p className="text-slate-300">
                Your task data has been exported as JSON. You can copy this data or download it as a file.
              </p>

<div className="flex justify-end gap-3 pt-4">
                <Button variant="outline" onClick={() => setExportMode(false)}>
                  Back to Import
                </Button>
                <Button onClick={handleDownload} className="bg-blue-600 hover:bg-blue-700">
                  <Download className="mr-2 h-4 w-4" />
                  Download File
                </Button>
              </div>
            </div>
          ) : (
            <div className="space-y-4">
              <p className="text-slate-300">
                Paste your previously exported task data below to import it. This will replace your current tasks.
              </p>

<Textarea
                value={importData}
                onChange={(e) => {
                  setImportData(e.target.value)
                  setImportStatus("idle")
                }}
                placeholder="Paste your JSON task data here..."
                className="h-64 font-mono text-sm backdrop-blur-md bg-slate-700/50 border-slate-600"
              />

{importStatus === "success" && (
                <div className="flex items-center text-green-400 bg-green-900/20 p-3 rounded-md">
                  <Check className="h-5 w-5 mr-2" />
                  Tasks imported successfully!
                </div>
              )}

{importStatus === "error" && (
                <div className="flex items-center text-red-400 bg-red-900/20 p-3 rounded-md">
                  <AlertCircle className="h-5 w-5 mr-2" />
                  Error importing tasks. Please check your data format.
                </div>
              )}

<div className="flex justify-end gap-3 pt-4">
                <Button variant="outline" onClick={handleExport}>
                  Export Instead
                </Button>
                <Button
                  onClick={handleImport}
                  disabled={!importData.trim()}
                  className="bg-blue-600 hover:bg-blue-700 disabled:bg-slate-700"
                >
                  <Upload className="mr-2 h-4 w-4" />
                  Import Tasks
                </Button>
              </div>
            </div>
          )}
        </div>
      </motion.div>
    </motion.div>
  )
}

[V0_FILE]typescriptreact:file="components/task-dashboard.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useCallback } from "react"
import { AnimatePresence, motion } from "framer-motion"
import {
  PlusCircle,
  Calendar,
  Tag,
  CheckCircle2,
  Clock,
  Filter,
  Search,
  X,
  Menu,
  Circle,
  BarChart2,
  Download,
  Trash,
  Instagram,
  Slack,
  CalendarDays,
  Mail,
  ExternalLink,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Input } from "@/components/ui/input"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import TaskList from "@/components/task-list"
import TaskForm from "@/components/task-form"
import TaskDetail from "@/components/task-detail"
import TaskStatisticsPanel from "@/components/task-statistics-panel"
import ImportExportPanel from "@/components/import-export-panel"
import { useTaskContext } from "@/context/task-context"
import { useMediaQuery } from "@/hooks/use-media-query"

export default function TaskDashboard() {
  const {
    tasks,
    categories,
    tags,
    statistics,
    toggleTaskStatus,
    deleteTask,
    duplicateTask,
    bulkDeleteTasks,
    bulkUpdateTaskStatus,
    bulkUpdateTaskCategory,
  } = useTaskContext()

const [isFormOpen, setIsFormOpen] = useState(false)
  const [editingTask, setEditingTask] = useState<string | null>(null)
  const [selectedTask, setSelectedTask] = useState<string | null>(null)
  const [filter, setFilter] = useState("all")
  const [searchQuery, setSearchQuery] = useState("")
  const [sidebarOpen, setSidebarOpen] = useState(true)
  const [showStatistics, setShowStatistics] = useState(false)
  const [showImportExport, setShowImportExport] = useState(false)
  const [selectedTasks, setSelectedTasks] = useState<string[]>([])
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)

const isMobile = useMediaQuery("(max-width: 768px)")

// Check if we need to close sidebar on mobile
  useState(() => {
    if (isMobile) {
      setSidebarOpen(false)
    }
  })

const handleEditTask = useCallback((taskId: string) => {
    setEditingTask(taskId)
    setIsFormOpen(true)
  }, [])

const handleViewTask = useCallback((taskId: string) => {
    setSelectedTask(taskId)
  }, [])

const handleCloseTaskDetail = useCallback(() => {
    setSelectedTask(null)
  }, [])

const handleDuplicateTask = useCallback(
    (taskId: string) => {
      duplicateTask(taskId)
    },
    [duplicateTask],
  )

const filteredTasks = tasks.filter((task) => {
    // First apply search filter
    if (searchQuery) {
      const query = searchQuery.toLowerCase()
      if (!task.title.toLowerCase().includes(query) && !task.description.toLowerCase().includes(query)) {
        return false
      }
    }

// Then apply category/status filter
    if (filter === "all") return true
    if (filter === "completed") return task.status === "completed"
    if (filter === "todo") return task.status === "todo"
    if (filter === "inprogress") return task.status === "inprogress"
    if (filter.startsWith("category-")) {
      const categoryId = filter.replace("category-", "")
      return task.categoryId === categoryId
    }
    if (filter.startsWith("tag-")) {
      const tagId = filter.replace("tag-", "")
      return task.tags?.includes(tagId)
    }
    if (filter === "today") {
      const today = new Date()
      today.setHours(0, 0, 0, 0)
      const taskDate = new Date(task.dueDate)
      taskDate.setHours(0, 0, 0, 0)
      return taskDate.getTime() === today.getTime()
    }
    if (filter === "upcoming") {
      const today = new Date()
      today.setHours(0, 0, 0, 0)
      const taskDate = new Date(task.dueDate)
      taskDate.setHours(0, 0, 0, 0)
      return taskDate.getTime() > today.getTime()
    }
    if (filter === "recurring") {
      return !!task.recurrence
    }
    if (filter === "overdue") {
      const today = new Date()
      today.setHours(0, 0, 0, 0)
      const taskDate = new Date(task.dueDate)
      taskDate.setHours(0, 0, 0, 0)
      return taskDate < today && task.status !== "completed"
    }
    return true
  })

// Animation variants
  const sidebarVariants = {
    open: { x: 0, opacity: 1 },
    closed: { x: "-100%", opacity: 0 },
  }

const contentVariants = {
    wide: { paddingLeft: 0 },
    narrow: { paddingLeft: isMobile ? 0 : "16rem" },
  }

const toggleTaskSelection = (taskId: string) => {
    if (selectedTasks.includes(taskId)) {
      setSelectedTasks(selectedTasks.filter((id) => id !== taskId))
    } else {
      setSelectedTasks([...selectedTasks, taskId])
    }
  }

const clearTaskSelection = () => {
    setSelectedTasks([])
  }

const selectAllFilteredTasks = () => {
    setSelectedTasks(filteredTasks.map((task) => task.id))
  }

// Bulk action handlers
  const handleBulkComplete = () => {
    bulkUpdateTaskStatus(selectedTasks, "completed")
    clearTaskSelection()
  }

const handleBulkDelete = () => {
    setShowDeleteConfirm(true)
  }

const confirmBulkDelete = () => {
    bulkDeleteTasks(selectedTasks)
    clearTaskSelection()
    setShowDeleteConfirm(false)
  }

const handleBulkUpdateCategory = (categoryId: string) => {
    bulkUpdateTaskCategory(selectedTasks, categoryId)
    clearTaskSelection()
  }

// Mock functions for connect buttons
  const handleConnectSlack = () => {
    alert("Connecting to Slack... This would open an OAuth flow in a real app.")
  }

const handleConnectGoogleCalendar = () => {
    alert("Connecting to Google Calendar... This would open an OAuth flow in a real app.")
  }

const handleConnectMicrosoftCalendar = () => {
    alert("Connecting to Microsoft Calendar... This would open an OAuth flow in a real app.")
  }

return (
    <div className="max-w-7xl mx-auto">
      <header className="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
        <div className="flex items-center">
          {isMobile && (
            <Button variant="ghost" size="icon" onClick={() => setSidebarOpen(!sidebarOpen)} className="mr-2">
              <Menu className="h-5 w-5" />
            </Button>
          )}
          <div>
            <h1 className="text-3xl md:text-4xl font-bold text-white">Tasks</h1>
            <p className="text-slate-400 mt-1">Manage your tasks efficiently</p>
          </div>
        </div>
        <div className="flex items-center gap-3 w-full md:w-auto">
          <div className="relative flex-1 md:w-64">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-slate-400" />
            <Input
              placeholder="Search tasks..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-10 backdrop-blur-md bg-slate-800/50 border-slate-700"
            />
            {searchQuery && (
              <Button
                variant="ghost"
                size="icon"
                className="absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6"
                onClick={() => setSearchQuery("")}
              >
                <X className="h-3 w-3" />
              </Button>
            )}
          </div>

<Button
            variant="outline"
            size="icon"
            onClick={() => setShowStatistics(true)}
            className="hidden md:flex"
            title="View Statistics"
          >
            <BarChart2 className="h-5 w-5" />
          </Button>

<Button
            variant="outline"
            size="icon"
            onClick={() => setShowImportExport(true)}
            className="hidden md:flex"
            title="Import/Export"
          >
            <Download className="h-5 w-5" />
          </Button>

<Button
            onClick={() => {
              setEditingTask(null)
              setIsFormOpen(true)
            }}
            className="bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600 text-white rounded-full px-6"
          >
            <PlusCircle className="mr-2 h-5 w-5" />
            <span className="hidden sm:inline">New Task</span>
          </Button>
        </div>
      </header>

<div className="grid grid-cols-1 gap-6 relative">
        {/* Sidebar */}
        <AnimatePresence>
          {sidebarOpen && (
            <motion.div
              className={`fixed top-0 left-0 h-full z-40 w-64 pt-20 pb-6 px-4 backdrop-blur-xl bg-slate-900/80 border-r border-slate-700/50 overflow-y-auto thin-scrollbar ${isMobile ? "shadow-xl" : ""}`}
              initial="closed"
              animate="open"
              exit="closed"
              variants={sidebarVariants}
              transition={{ type: "spring", stiffness: 300, damping: 30 }}
            >
              {isMobile && (
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => setSidebarOpen(false)}
                  className="absolute top-4 right-4"
                >
                  <X className="h-5 w-5" />
                </Button>
              )}

{/* Logo and Title */}
              <div className="mb-8">
                <a href="/" className="flex flex-col items-center text-center">
                  <div className="w-16 h-16 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center mb-3 shadow-glow">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="32"
                      height="32"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="text-white"
                    >
                      <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
                      <path d="M12 3a6 6 0 0 1-9 9 9 9 0 0 0 9 9 9 9 0 0 0 9-9 9 9 0 0 0-9-9Z"></path>
                    </svg>
                  </div>
                  <h1 className="text-lg font-bold text-white">Flowers&Saints</h1>
                  <p className="text-xs text-slate-400">Task Manager</p>
                </a>
              </div>

<div className="space-y-6">
                <div>
                  <h2 className="font-semibold text-lg mb-4 text-white">Filters</h2>

<div className="space-y-1 mb-6">
                    <Button
                      variant={filter === "all" ? "default" : "ghost"}
                      onClick={() => setFilter("all")}
                      className="w-full justify-start"
                    >
                      <Filter className="mr-2 h-4 w-4" />
                      All Tasks
                    </Button>
                    <Button
                      variant={filter === "today" ? "default" : "ghost"}
                      onClick={() => setFilter("today")}
                      className="w-full justify-start"
                    >
                      <Calendar className="mr-2 h-4 w-4" />
                      Today
                    </Button>
                    <Button
                      variant={filter === "upcoming" ? "default" : "ghost"}
                      onClick={() => setFilter("upcoming")}
                      className="w-full justify-start"
                    >
                      <Clock className="mr-2 h-4 w-4" />
                      Upcoming
                    </Button>
                    <Button
                      variant={filter === "overdue" ? "default" : "ghost"}
                      onClick={() => setFilter("overdue")}
                      className="w-full justify-start text-red-400"
                    >
                      <Clock className="mr-2 h-4 w-4" />
                      Overdue
                    </Button>
                    <Button
                      variant={filter === "recurring" ? "default" : "ghost"}
                      onClick={() => setFilter("recurring")}
                      className="w-full justify-start"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="mr-2 h-4 w-4"
                      >
                        <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path>
                        <path d="M3 3v5h5"></path>
                      </svg>
                      Recurring
                    </Button>
                  </div>
                </div>

<div>
                  <h3 className="font-medium text-sm text-slate-400 mb-2">Status</h3>
                  <div className="space-y-1 mb-6">
                    <Button
                      variant={filter === "todo" ? "default" : "ghost"}
                      onClick={() => setFilter("todo")}
                      className="w-full justify-start"
                    >
                      <Circle className="mr-2 h-4 w-4" />
                      To Do
                    </Button>
                    <Button
                      variant={filter === "inprogress" ? "default" : "ghost"}
                      onClick={() => setFilter("inprogress")}
                      className="w-full justify-start"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="16"
                        height="16"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        className="mr-2 h-4 w-4"
                      >
                        <path d="M12 2v4"></path>
                        <path d="M12 18v4"></path>
                        <path d="M4.93 4.93l2.83 2.83"></path>
                        <path d="M16.24 16.24l2.83 2.83"></path>
                        <path d="M2 12h4"></path>
                        <path d="M18 12h4"></path>
                        <path d="M4.93 19.07l2.83-2.83"></path>
                        <path d="M16.24 7.76l2.83-2.83"></path>
                      </svg>
                      In Progress
                    </Button>
                    <Button
                      variant={filter === "completed" ? "default" : "ghost"}
                      onClick={() => setFilter("completed")}
                      className="w-full justify-start"
                    >
                      <CheckCircle2 className="mr-2 h-4 w-4" />
                      Completed
                    </Button>
                  </div>
                </div>

<div>
                  <h3 className="font-medium text-sm text-slate-400 mb-2">Categories</h3>
                  <div className="space-y-1 mb-6">
                    {categories.map((category) => (
                      <Button
                        key={category.id}
                        variant={filter === `category-${category.id}` ? "default" : "ghost"}
                        onClick={() => setFilter(`category-${category.id}`)}
                        className="w-full justify-start"
                      >
                        <Tag className="mr-2 h-4 w-4" style={{ color: category.color }} />
                        {category.name}
                      </Button>
                    ))}
                  </div>
                </div>

<div>
                  <h3 className="font-medium text-sm text-slate-400 mb-2">Tags</h3>
                  <div className="space-y-1">
                    {tags.map((tag) => (
                      <Button
                        key={tag.id}
                        variant={filter === `tag-${tag.id}` ? "default" : "ghost"}
                        onClick={() => setFilter(`tag-${tag.id}`)}
                        className="w-full justify-start"
                      >
                        <span className="w-3 h-3 rounded-full mr-2" style={{ backgroundColor: tag.color }}></span>
                        {tag.name}
                      </Button>
                    ))}
                  </div>
                </div>

{/* Connect Section */}
                <div className="pt-4 border-t border-slate-700/50">
                  <h3 className="font-medium text-sm text-slate-400 mb-3">Connect</h3>
                  <div className="space-y-2">
                    <a
                      href="https://www.instagram.com/dollargill"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="flex items-center w-full px-3 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-pink-500 hover:from-purple-700 hover:to-pink-600 text-white transition-colors"
                    >
                      <Instagram className="h-4 w-4 mr-2" />
                      <span className="text-sm font-medium">Follow on Instagram</span>
                      <ExternalLink className="h-3 w-3 ml-auto opacity-70" />
                    </a>

<Button
                      variant="outline"
                      className="w-full justify-start bg-slate-800/50 border-slate-700 hover:bg-slate-700/50"
                      onClick={handleConnectSlack}
                    >
                      <Slack className="h-4 w-4 mr-2 text-[#E01E5A]" />
                      <span className="text-sm">Connect Slack</span>
                    </Button>

<Button
                      variant="outline"
                      className="w-full justify-start bg-slate-800/50 border-slate-700 hover:bg-slate-700/50"
                      onClick={handleConnectGoogleCalendar}
                    >
                      <CalendarDays className="h-4 w-4 mr-2 text-[#4285F4]" />
                      <span className="text-sm">Connect Google Calendar</span>
                    </Button>

<Button
                      variant="outline"
                      className="w-full justify-start bg-slate-800/50 border-slate-700 hover:bg-slate-700/50"
                      onClick={handleConnectMicrosoftCalendar}
                    >
                      <Mail className="h-4 w-4 mr-2 text-[#00A4EF]" />
                      <span className="text-sm">Connect Microsoft Calendar</span>
                    </Button>
                  </div>
                </div>

<div className="pt-4 border-t border-slate-700/50">
                  <div className="flex flex-col gap-2">
                    <Button
                      variant="outline"
                      size="sm"
                      onClick={() => setShowStatistics(true)}
                      className="justify-start md:hidden"
                    >
                      <BarChart2 className="mr-2 h-4 w-4" />
                      Statistics
                    </Button>

<Button
                      variant="outline"
                      size="sm"
                      onClick={() => setShowImportExport(true)}
                      className="justify-start md:hidden"
                    >
                      <Download className="mr-2 h-4 w-4" />
                      Import/Export
                    </Button>
                  </div>
                </div>
              </div>
            </motion.div>
          )}
        </AnimatePresence>

{/* Main content */}
        <motion.div
          className="w-full"
          animate={sidebarOpen && !isMobile ? "narrow" : "wide"}
          variants={contentVariants}
          transition={{ type: "spring", stiffness: 300, damping: 30 }}
        >
          {/* Bulk actions bar */}
          {selectedTasks.length > 0 && (
            <div className="mb-4 p-3 backdrop-blur-lg bg-slate-800/70 border border-slate-700/50 rounded-lg flex flex-wrap items-center justify-between">
              <div className="flex items-center">
                <span className="text-sm text-slate-300 mr-4">{selectedTasks.length} tasks selected</span>
                <Button variant="ghost" size="sm" onClick={clearTaskSelection} className="text-xs">
                  Clear
                </Button>
                <Button variant="ghost" size="sm" onClick={selectAllFilteredTasks} className="text-xs">
                  Select All
                </Button>
              </div>
              <div className="flex items-center gap-2 mt-2 sm:mt-0">
                <Button variant="outline" size="sm" onClick={handleBulkComplete}>
                  <CheckCircle2 className="mr-1 h-4 w-4" />
                  Complete
                </Button>
                <Button
                  variant="outline"
                  size="sm"
                  onClick={handleBulkDelete}
                  className="text-red-500 hover:text-red-400 hover:bg-red-950/50"
                >
                  <Trash className="mr-1 h-4 w-4" />
                  Delete
                </Button>

<Popover>
                  <PopoverTrigger asChild>
                    <Button variant="outline" size="sm">
                      <Tag className="mr-1 h-4 w-4" />
                      Category
                    </Button>
                  </PopoverTrigger>
                  <PopoverContent className="w-56 p-0" align="end">
                    <div className="p-2">
                      <h4 className="text-sm font-medium mb-2">Select Category</h4>
                      <div className="space-y-1">
                        {categories.map((category) => (
                          <Button
                            key={category.id}
                            variant="ghost"
                            size="sm"
                            className="w-full justify-start"
                            onClick={() => handleBulkUpdateCategory(category.id)}
                          >
                            <div
                              className="w-3 h-3 rounded-full mr-2"
                              style={{ backgroundColor: category.color }}
                            ></div>
                            {category.name}
                          </Button>
                        ))}
                      </div>
                    </div>
                  </PopoverContent>
                </Popover>
              </div>
            </div>
          )}

<Tabs defaultValue="all" className="w-full">
            <TabsList className="backdrop-blur-lg bg-slate-800/70 border border-slate-700/50 rounded-lg mb-6">
              <TabsTrigger value="all">All</TabsTrigger>
              <TabsTrigger value="todo">To Do</TabsTrigger>
              <TabsTrigger value="inprogress">In Progress</TabsTrigger>
              <TabsTrigger value="completed">Completed</TabsTrigger>
            </TabsList>

<TabsContent value="todo">
              <TaskList
                tasks={filteredTasks.filter((task) => task.status === "todo")}
                selectedTasks={selectedTasks}
                onToggleSelection={toggleTaskSelection}
                onToggleStatus={toggleTaskStatus}
                onEdit={handleEditTask}
                onDelete={deleteTask}
                onView={handleViewTask}
                onDuplicate={handleDuplicateTask}
              />
            </TabsContent>

<TabsContent value="inprogress">
              <TaskList
                tasks={filteredTasks.filter((task) => task.status === "inprogress")}
                selectedTasks={selectedTasks}
                onToggleSelection={toggleTaskSelection}
                onToggleStatus={toggleTaskStatus}
                onEdit={handleEditTask}
                onDelete={deleteTask}
                onView={handleViewTask}
                onDuplicate={handleDuplicateTask}
              />
            </TabsContent>

<TabsContent value="completed">
              <TaskList
                tasks={filteredTasks.filter((task) => task.status === "completed")}
                selectedTasks={selectedTasks}
                onToggleSelection={toggleTaskSelection}
                onToggleStatus={toggleTaskStatus}
                onEdit={handleEditTask}
                onDelete={deleteTask}
                onView={handleViewTask}
                onDuplicate={handleDuplicateTask}
              />
            </TabsContent>
          </Tabs>
        </motion.div>
      </div>

{/* Task Form Modal */}
      <AnimatePresence>
        {isFormOpen && (
          <TaskForm
            taskId={editingTask}
            onClose={() => {
              setIsFormOpen(false)
              setEditingTask(null)
            }}
          />
        )}
      </AnimatePresence>

{/* Task Detail Sidebar */}
      <AnimatePresence>
        {selectedTask && <TaskDetail taskId={selectedTask} onClose={handleCloseTaskDetail} onEdit={handleEditTask} />}
      </AnimatePresence>

{/* Statistics Panel */}
      <AnimatePresence>
        {showStatistics && <TaskStatisticsPanel onClose={() => setShowStatistics(false)} />}
      </AnimatePresence>

{/* Import/Export Panel */}
      <AnimatePresence>
        {showImportExport && <ImportExportPanel onClose={() => setShowImportExport(false)} />}
      </AnimatePresence>

{/* Delete Confirmation Dialog */}
      <AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Delete {selectedTasks.length} tasks?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This will permanently delete the selected tasks.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction onClick={confirmBulkDelete} className="bg-red-500 hover:bg-red-600">
              Delete
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}
</article></body></html>

About

Tags

Share

More from dollargill

More Templates Like This

About

Tags

Share

About

Tags

Share

More from dollargill

More Templates Like This